<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>

    <script
      src="https://unpkg.com/react@18/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
      crossorigin
    ></script>

    <script>
      const root = ReactDOM.createRoot(document.querySelector('#root'))

      class App extends React.Component {
        constructor() {
          super()

          this.state = {
            message: 'Hello World'
          }
        }

        render() {
          const { message } = this.state

          const element = /*#__PURE__*/ React.createElement(
            'div',
            null,
            /*#__PURE__*/ React.createElement(
              'div',
              {
                className: 'header'
              },
              'header'
            ),
            /*#__PURE__*/ React.createElement(
              'div',
              {
                className: 'content'
              },
              /*#__PURE__*/ React.createElement(
                'div',
                {
                  className: 'banner'
                },
                'banner'
              ),
              /*#__PURE__*/ React.createElement(
                'div',
                {
                  className: 'other'
                },
                'other'
              )
            ),
            /*#__PURE__*/ React.createElement(
              'div',
              {
                className: 'footer'
              },
              'footer'
            )
          )

          console.log(element)

          return element
        }
      }

      root.render(React.createElement(App, null))
    </script>
  </body>
</html>
